<template>
  <main class="add-container">
    <el-dialog
      :title="ruleForm.id ? '编辑' : '添加'"
      :visible="dialogVisible"
      width="600px"
      @close="close"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="标签类型" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio label="1">普通标签</el-radio>
            <el-radio label="2">热门标签</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标签名称" prop="content">
          <el-input v-model="ruleForm.content"> </el-input>
        </el-form-item>
        <el-form-item label="同义词组" prop="synonym">
          <el-input maxlength="20" v-model="synonym">
            <template slot="suffix"
              ><span
                style="margin-right: 20px; color: #169bd5"
                @click="addSynonym"
                >添加</span
              >
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <div class="tag-box">
            <el-tag
              :closable="!isSelectArr.includes(item)"
              @close="removeTag(index)"
              class="el-tag"
              v-for="(item, index) in tagList"
              type="info"
              :key="index"
            >
              {{ item }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button @click="close()">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </main>
</template>
<script>
import {
  getlabelAddApi,
  getlabelEditApi,
} from "@/wss/newApi_3-24/base/label.js";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (this.synonym === "" && this.tagList.length == 0) {
        callback(new Error("请输入密码"));
      } else {
        // if (this.ruleForm.checkPass !== "") {
        //   this.$refs.ruleForm.validateField("checkPass");
        // }
        callback();
      }
    };
    return {
      isSelectArr: [], //已经添加的同义词

      title: "", // 标题
      tagList: [],

      synonym: "", //同义词
      ruleForm: {
        content: "", //	标签名
        type: "", //	普通标签 2:热度标签
        synonym: "", //	同义词
        status: "", //	'状态 0正常 1停用'
      },
      rules: {
        content: [
          {
            required: true,
            message: "请输入标签名称",
            trigger: "blur",
          },
          { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" },
        ],
        // synonym: [
        //   {
        //     required: true,
        //     message: "请输入同义词",
        //     trigger: "blur",
        //     validator: validatePass,
        //   },
        // ],
        type: [
          { required: true, message: "请选择标签类型", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    "ruleForm.synonym"() {
      if (this.ruleForm.synonym == "") return;
      this.tagList = this.ruleForm.synonym.split(",");
    },
  },
  computed: {
    getSynonym() {},
  },
  methods: {
    // 回显
    echo(row) {
      // 有同义词才添加
      if (!!row.synonym) this.isSelectArr = row.synonym.split(",");

      this.ruleForm = row;
    },
    // 修改
    async edit() {
      const _this = this;

      let { code, msg } = await getlabelEditApi(this.ruleForm);
      if (code != 200) return;

      _this.$message({
        type: "success",
        message: msg,
      });
      _this.close();
      _this.$emit("eventGettag");
    },
    // 提交
    async submitForm(formName) {
      const _this = this;

      await _this.$refs[formName].validate();

      _this.ruleForm.synonym = _this.tagList.join(",");
      // 修改
      if (_this.ruleForm.id) {
        _this.edit();
        return;
      }
      let { code, msg } = await getlabelAddApi(_this.ruleForm);
      if (code != 200) return;
      _this.$message({
        type: "success",
        message: msg,
      });

      _this.close();
      _this.$emit("eventGettag");
    },
    // 去除标签
    removeTag(item) {
      const _this = this;
      _this.tagList.splice(item, 1);

      if (_this.tagList.length == 0) {
        _this.ruleForm.synonym = "";

        return;
      }

      _this.ruleForm.synonym = _this.tagList.join(",");
    },
    // 添加同义词
    addSynonym() {
      const _this = this;

      // 如果已经存在就不添加
      if (this.tagList.includes(_this.synonym)) return;
      if (_this.synonym == "") return;
      if (_this.ruleForm.synonym == "") {
        _this.ruleForm.synonym += `${_this.synonym}`;
      } else {
        _this.ruleForm.synonym += `,${_this.synonym}`;
      }

      _this.synonym = "";
    },
    resetForm(formName) {},
    // 关闭对话框
    close() {
      this.$refs["ruleForm"].resetFields();
      const _this = this;
      _this.$emit("update:dialogVisible", false);
      _this.ruleForm = {
        content: "", //	标签名
        type: "", //	普通标签 2:热度标签
        synonym: "", //	同义词
        status: "", //	'状态 0正常 1停用'
      };
      _this.synonym = "";
      _this.tagList = [];
    },
  },
};
</script>
<style lang="scss" scoped>
.tag-box {
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  .el-tag {
    max-width: 100%;
    margin-right: 20px;
    margin-bottom: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>